<template>
	<view class="box">
		<view v-if="is_load">
      <div class="top-bg"></div>
      <map subkey="NYTBZ-MMLE6-TO7SN-MD5XU-CS4EE-JIBEU" layer-style="2" id="maps" show-location :longitude="markers_list[0].longitude" :latitude="markers_list[0].latitude" :markers="markers_list" :scale="scale" ></map>
			<view class=" content">
				<view class="wrapper">
					<view class="zb-dd">
						<view class="font_35 text_bold detail_m1" style="margin-bottom: 16rpx;">{{detail_info.store_name}}</view>
						<view class="font_27" v-if="detail_info.status == 1">营业时间：{{detail_info.business_hours}}</view>
            
            
						<view class="font_27" v-else>停业中</view>
            
            
						<view class="flex1 detail_m3">
							<view class="address_info hidden">
								<view class="font_27 color_7b detail_m2" style="letter-spacing: 2rpx;"
									v-if="!detail_info.orders">地址：{{(detail_info.address).substr(0, 6)}}****
									(下单后提供寄存点的<text class="color_ff6a00">地址、电话、导航</text>)</view>
								<view class="font_27 color_7b detail_m2" style="letter-spacing: 2rpx;" v-else>
									<view>地址：{{detail_info.address}}</view>
									<view>电话：{{detail_info.mobile}}</view>
								</view>
                <view class="flex1" style="margin:10rpx 0 16rpx;align-items: center; " v-if="detail_info.position">
                  <image src="../../static/image/index/w@2x.png" mode="heightFix" style="height: 25rpx;width: 20rpx;margin: 4rpx 16rpx 0 0;" />
                  <view class="font_23 flex1 color_7b" style="flex: 1; width: 100%;">{{detail_info.position}}</view>
                </view>
								<view class="block_wrapper">
									<view class="font_23 color_7b bg_f2" v-for="item in detail_info.label_text"
										:key="item">{{item}}</view>
								</view>
							</view>
							<!-- <image src="../../static/image/index/t@2x.png" class="map_icon" @click="get_map"></image> -->
						</view>
					</view>
					<view class="zb-dd">
						<view class="flex-bect">
              <view class="font_35 text_bold detail_m4">寄存价格</view>
              <view class="flex-bect font_27" @click="show_pup(1,'计费规则')">计费规则<image src="../../static/image/index/ri.png" class="jt"></image></view>
            </view>
						
            <view class="flex-bect" style="margin-bottom: 20rpx;">
              <view class="price_wrapper price_new_item hidden">
              	<view class="" style="width:100%">
                  <view class="flex3 flex-lect">
                  	<image src="../../static/image/index/k1@2x.png" class="price_icon1"></image>
                  	<view>
                      <view class="font_28">行李箱¥{{detail_info.trunk}}/天</view>
                      <view class="font_26 color_7b">最大边 > 45CM</view>
                    </view>
                  </view>
                  
                </view>
              </view>
              <view class="price_wrapper price_new_item hidden">
              	<view class="" style="width:100%">
                  <view class="flex3 flex-lect">
                  	<image src="../../static/image/index/l1@2x.png" class="price_icon2"></image>
                  	<view>
                      <view class="font_28">背包¥{{detail_info.packsack}}/天</view>
                      <view class="font_26 color_7b">最大边 ≤ 45CM</view>
                    </view>
                  </view>
                  
                </view>
              </view>
            </view>
            <view class="tip1"><text class="red">*</text>按天计费，一个自然工作日为一天（即过夜累计增加一天）</view>
          </view>
					<view class="zb-dd">
            <view class="bz-list" @click="show_pup(2,'服务保障')">
              <view class="font_35 text_bold detail_m7" style="margin: 0 20rpx 0 0;">服务保障</view>
              <view v-for="(item, index) in bzList" :key="index" class="dd">
                <view class="rad">{{item.lab}}</view>
                <view class="con">{{item.name}}</view>
              </view>
              <view class="flex1" style="flex: 1; width: 100%;"></view>
              <view class="ri color_999"><image src="../../static/image/index/ri.png" class="jt"></image></view>
            </view>
					</view>
          <navigator url="/pages/fwb/coupon" class="zb-dd" hover-class="none">
            <view class="flex-bect" style="padding-top: 20rpx;">
              <view class="font_35 text_bold">领取优惠券</view>
              <view class="ri color_999"><image src="../../static/image/index/ri.png" class="jt"></image></view>
            </view>
          </navigator>
					<view class="zb-dd">
						<view class="font_35 text_bold detail_m7">门店介绍</view>
						<view class="font_27 color_7b introduce detail_m9">
							{{detail_info.intro}}
						</view>
					</view>
					<view class="zb-dd">
						<view class="font_35 text_bold detail_m7" style="margin-bottom: 4rpx;">门店评价</view>
						<view class="hidden">
							<view class="color_999 font_23 detail_m13" v-if="!detail_info.evaluate">暂无评价~</view>
							<v-evaluate :info="detail_info.evaluate" v-else></v-evaluate>
						</view>
					</view>
					<!-- 预定须知 -->
          <view class="yuding zb-dd">
						<view class="flex8">
							<view class="font_35 text_bold detail_m7">预定须知</view>
						</view>
						
            <view class="yd-list">
              <view class="dd flex-bect">
                <view class="lab">寄存空间</view>
                <view class="con">该寄存点为人工寄存处，<text class="red">非自助寄存柜</text>。</view>
              </view>
              <view class="dd flex-bect">
                <view class="lab">存取时间</view>
                <view class="con"><text class="red">{{detail_info.business_hours_start}}</text>后到店寄存，<text class="red">{{detail_info.business_hours_end}}</text>前取走行李。</view>
              </view>
              <view class="dd flex-bect">
                <view class="lab">寄存要求</view>
                <view class="con">禁止寄存违禁物品，不可寄存贵重物品。</view>
              </view>
              <view class="dd flex-bect">
                <view class="lab">寄存提示</view>
                <view class="con">寄存点<text class="red">详细地址、联系电话</text>及<text class="red">导航功能</text>将在下单后提供。</view>
              </view>
              <view class="dd flex-bect">
                <view class="lab">退订规则</view>
                <view class="con list">
                  <view class="li flex-bect">
                    <view class="ico"></view>
                    <view class="div">
                      <view class="texts">提前一天取消订单，可退全款</view>
                    </view>
                  </view>
                  <view class="li flex-bect">
                    <view class="ico"></view>
                    <view class="div">
                      <view class="texts">存件日期00:00 -24:00取消订单</view>
                      <view class="tip2"><text class="l">收取支付金额20%的取消费</text></view>
                    </view>
                  </view>
                  <view class="li flex-bect">
                    <view class="ico"></view>
                    <view class="div">
                      <view class="texts">以下情况无法取消与退款:</view>
                      <view class="tip2">
                        <text class="l">已使用</text>
                        <text class="l">已过期</text>
                        <text class="l">已变更</text>
                        <text class="l">退款已撤销</text>
                      </view>
                    </view>
                  </view>
                  <view class="li flex-bect">
                    <view class="ico"></view>
                    <view class="div">
                      <navigator :url="'/pages/fwb/index?type=tdgz'" class="texts a">详细退订规则 》</navigator>
                    </view>
                  </view>
                  
                </view>
              </view>
              <view class="dd flex-bect">
                <view class="lab">温馨提示</view>
                <view class="con">到店后请务必拍照上传行李照片，为了您的财产安全，请勿线下交易。</view>
              </view>
            </view>
            
            
					</view>
				</view>
			</view>
			<view class="detail_foot flex3">
				<view class="detail_foot_left">
					<image src="../../static/image/index/x@2x.png"></image>
				  <view class="font_19 color_7b">客服（08:00~22:00）</view>
					<button plain open-type="contact"></button>
				</view>
        <view class="detail_foot_left">
        	<image src="../../static/image/index/fx.png" style="width: 36rpx; height: 36rpx;"></image>
          <view class="font_19 color_7b">分享<text style="opacity: 0;">（08:00~22:00）</text></view>
        	<button plain open-type="share"></button>
        </view>
        <view  class="font_35 text_bold detail_foot_btn flex7 color_fff" @click="downOrder('/pages/index/order?id=' + id)">寄存下单</view>
				<!-- <navigator :url="'./order?id=' + id" hover-class="none" class="font_35 text_bold detail_foot_btn flex7 color_fff" @click="downOrder('./order?id=' + id)">寄存下单</navigator> -->
			</view>
		</view>
    <view class="copy">
      <v-copy></v-copy>
    </view>
    
    
    
    
    
    
    <view class="pup" v-if="pup">
      <view class="boxs">
        <view class="tit">
          {{pup_tit}}
          <view class="close-box" @click="pup=false"><image src="../../static/image/user/close.png" mode="aspectFill" class="close"></image></view>
        </view>
        <scroll-view scroll-y="true" class="scroll">
          <view class="con" v-if="pup_type === 1">
            <view class="top">
              <view class="p1">温馨提示</view>
              <view class="p2">为了保障你的权益，避免物品丢失，请按实际行李数下单请勿放置现金、证件、电脑、相机等贵重物品</view>
            </view>
            <view class="p3">行李箱包含: 旅行箱(30寸以下)、编织袋、婴儿车等</view>
            <view class="p4">最大边长大于45cm，且一边尺寸之和不超过158cm</view>
            <image src="../../static/image/index/jf-1.png" mode="aspectFill" class="img img1"></image>
            <view class="p3">背包包含:双肩包、手提包、购物袋、塑料袋等</view>
            <view class="p4">最大边长小于45cm</view>
            <image src="../../static/image/index/jf-2.png" mode="aspectFill" class="img img2"></image>
            <view class="p3">如预定一件行李，请勿在行李箱上附加小件行李和其他物品，避免物品遗失。</view>
            <image src="../../static/image/index/jf-3.png" mode="aspectFill" class="img img3"></image>
          </view>
          <view class="con" v-if="pup_type === 2">
            <view class="bz-list">
              <view v-for="(item, index) in bzList" :key="index">
                <view class="dd">
                  <view class="rad">{{item.lab}}</view>
                  <view class="con">{{item.name}}</view>
                </view>
                <view class="texts p4">{{item.content}}</view>
              </view>
            </view>
            
            <view class="p3">请勿线下交易，线下交易将得不到以上所有保障</view>
          </view>
          
          <view class="btn" @click="pup=false">我知道了</view>
        </scroll-view>
      </view>
    </view>
    
    
	</view>
</template>

<script>
	import evaluate from './component/evaluate.vue';
import copy from '@/components/copy.vue';
	export default {
		components: {
			'v-evaluate': evaluate,
      'v-copy':copy
		},
		data() {
			return {
				id: '',
				isShow_img: false, // 图片是否显示
				is_str: false,
				topNum: '',
				is_load: false,
				detail_info: {},
				reserve: null, // 预定须知
        bzList:[
          {name:'售后支持',lab:'售',content:'如果下单后到店无法寄存，请联系在线客服。'},
          {name:'安全保障',lab:'安',content:'订单支持行李拍照上传，您的行李安全由平台全程障。'},
          {name:'服务监管',lab:'监',content:'如果由于门店原因导致您无法寄存，平台全额退款。'}
        ],
        pup:false,
        pup_tit:'',
        pup_type:2,
        order_id:'',
        markers_list:[],
        scale:16,
        mapIocn: null,
			}
		},
		onLoad(e) {
			this.id = e.id;
      this.order_id = e.order
			this.topNum = (uni.getSystemInfoSync()['statusBarHeight'] * 2) + 25;

			getApp().get_loading();
			this.get_detail();
		},
    onShow() {
      if(this.id ){
        this.topNum = (uni.getSystemInfoSync()['statusBarHeight'] * 2) + 25;
        
        getApp().get_loading();
        this.get_detail();
      }
      this.mapIocn = uni.createMapContext('maps');
    },
		methods: {
      // 寄存下单
      downOrder(e){
        const url = this.order_id ? e+'&tuik=1&order='+this.order_id : e
        if(e){
          uni.navigateTo({
            url:url
          })
        }else{
          
        }
      },
      show_pup(e,tit){
        this.pup = true;
        this.pup_tit = tit;
        this.pup_type = e;
      },
			get_detail() {
				this.$http.get(this.$api.storeDetail, {
					store_id: this.id
				}).then(res => {
          this.markers_list = [
            {
            	id: res.data.id,
            	width: 32,
            	height: 38,
            	latitude: res.data.lat,
            	longitude: res.data.lng,
            	iconPath: '../../static/image/index/ｏ@2x.png'
            }
          ]
          
          
					this.is_load = true;
					this.detail_info = res.data;

					if (res.data.orders) {
						this.isShow_img = this.get_now_time(res.data.orders);
					}

					this.detail_info.orders = null;

					let fist_ = res.data.reserve.substr(0, 1);

					if (fist_ === "[") {
						this.is_str = false;
						this.reserve = JSON.parse(res.data.reserve);
					} else {
						this.is_str = true;
						this.reserve = res.data.reserve;
					}
				})
			},
			get_now_time(e) {
				let a_ = e.start_time;
				let b_ = e.end_time;

				// 开始时间戳
				let a_time = new Date(a_.substring(0, 4) + '-' + a_.substring(5, 7) + '-' + a_.substring(8, 10)).getTime();
				// 结束时间戳 转换成晚上23：59：59
				let b_time = new Date(b_.substring(0, 4) + '-' + b_.substring(5, 7) + '-' + b_.substring(8, 10)).getTime();
				b_time = b_time + 86399000;

				// 现在时间戳
				let now_time = new Date().getTime();

				if (now_time <= b_time && now_time >= a_time) {
					return true;
				} else {
					return false;
				}
			},
			// 地图导航
			get_map() {
				if (!this.detail_info.orders) {
					getApp().get_msg('下单之后可在订单详情进行导航');
					return
				}

				let self = this;
				uni.openLocation({ //​ 使用微信内置地图查看位置。
					latitude: Number(self.detail_info.lat), //要去的纬度-地址
					longitude: Number(self.detail_info.lng), //要去的经度-地址
					name: self.detail_info.store_name,
					address: ''
				})
			}
		}
	}
</script>

<style lang="less">
  @keyframes run{
    0%{transform: translate(-50%, 0);}
    50%{transform: translate(-50%, 10px);}
    100%{transform: translate(-50%, 0);}
  }
  .quj-boxs{
    position: relative;
    .tip{
      position: absolute; width: 500rpx; background-color: rgba(0,0,0,0.8); border-radius: 8rpx; color: #fff; font-size: 24rpx; left: 50%; bottom: 40rpx; transform: translateX(-50%); padding: 20rpx; padding-right: 60rpx; animation: run 0.8s infinite; margin-bottom: -40rpx; z-index: 40; line-height: 1.6;
      &::after{content: ''; display: block; border: 16rpx solid transparent; border-top: none; border-bottom-color:rgba(0,0,0,0.8); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);}
    }
    .close{
      width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%);
      &::after,&::before{content: ''; display: block; width: 2px; height: 20rpx; background-color: #fff; position: absolute;}
      &::before{transform: rotate(45deg);}
      &::after{transform: rotate(-45deg);}
    }
  }
  .yuding{
    position: relative; z-index: 3;
    .yd-list{
      .dd{margin-bottom: 20rpx; align-items: flex-start; font-size: 26rpx;}
      .lab{color: #999;}
      .con{flex: 1; width: 100%; margin-left: 30rpx;}
      .red{color: #FF6A00;}
    }
    .list{
      .div{flex: 1; width: 100%; margin-left: 16rpx;}
      .texts{font-weight: bold; line-height: 26rpx; margin-bottom: 16rpx;}
      .a{color: #283bc1;}
      .li{
        padding-bottom: 70rpx; align-items: flex-start; position: relative;
        &::after{content: ''; display: block; width: 1px; height: 100%; border-left: 4rpx dashed #bbb; position: absolute; left: 12rpx; top: 20rpx;}
        &:last-child{
          padding-bottom: 0;
          &::after{display: none;}
        }
        
      }
      .ico{
        width: 20rpx; height: 20rpx; border-radius: 50%; border: 4rpx solid #FF6A00; display: flex; align-items: center; justify-content: center; position: relative;z-index: 4; background-color: #fff;
        // &::after{content: ''; display: block; width: 10rpx; height: 10rpx; background-color: #FF6A00; border-radius: 50%;}
      }
      .l{background-color: #ffecec;color: #e24545;font-size: 20rpx; margin-right: 16rpx; border-radius: 6rpx; padding: 4rpx 8rpx;}
    }
  }
  .copy{margin-bottom: 160rpx;}
  .box{background-color: #f5f5f5;}
  .font_35{font-size: 32rpx;}
  .zb-dd{
    position: relative; border-radius: 10rpx; background-color: #ffffff; padding: 2rpx 30rpx 20rpx; overflow: hidden; margin-bottom: 20rpx;
    // &::after{display: block; content: ''; margin: 0 -6%; height:15rpx; background-color: #f5f5f5;}
  }
  .pup{
    position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; z-index: 9999; left: 0; top: 0;
    view{box-sizing: border-box;}
    .boxs{width: 100%; border-radius: 10rpx 10rpx 0 0; background-color: #fff; font-size: 26rpx;line-height: 1.6;}
    .tit{
      font-size: 36rpx; text-align: center; padding: 20rpx 0; margin-bottom: 30rpx; border-bottom: 1px solid #ededed; position: relative;
      .close-box{width: 80rpx; height: 100%; position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: center;}
      .close{width: 30rpx; height: 30rpx; }
    }
    .scroll{
      width: 100%; max-height: 70vh;
      .img{width: 100%; height: 190rpx; display: block; margin-bottom: 30rpx;}
      .con{padding: 0 30rpx;}
      .img1{height: 256rpx;}
      // .img1{height: 256rpx;}
      .img3{height: 270rpx;}
      
      .top{background-color: #ffecec; text-align: center; padding: 30rpx; border-radius: 6rpx; color: #e24545;  margin-bottom: 26rpx;}
      .p1{margin-bottom: 6rpx;}
      .p4{color: #666; margin-bottom: 20rpx;}
    }
    .bz-list{
      display: block;
      .dd{font-size: 28rpx; } 
      .texts{font-size: 28rpx; margin: 6rpx 0 20rpx;}
      .rad{width: 36rpx; height: 36rpx;}
      .lab,.con{color: #333; padding: 0;}
    }
    .btn{display: flex; align-items: center; justify-content: center; width: 320rpx; margin: 40rpx auto; border-radius: 4rpx; background-color: #FF6A00; color: #fff; font-size: 30rpx; height: 70rpx;}
  }
  .flex-bect{display: flex; align-items: center; justify-content: space-between;}
  .top-bg{width: 100%; height: 290rpx; background-image: linear-gradient(#FF6A00,#f5f5f5); margin-bottom: -300rpx;}
  .tip1{font-size: 26rpx; color: #666;}
  .tip1 .red{color: red;}
  .bz-list{
    display: flex; align-items: center; justify-content: flex-start; padding: 30rpx 0 10rpx;
    .rad{width: 30rpx; height: 30rpx; border-radius: 50%; border: 1px solid #FF6A00; color: #FF6A00; display: flex; align-items: center; justify-content: center; font-size: 20rpx;}
    .dd{display: flex; align-items: center; justify-content: flex-start; margin-right: 16rpx;font-size: 24rpx;}
    .con{flex: 1; width: 100%; margin-left: 8rpx; color: #666;}
  }
  .jt{width: 30rpx; height: 30rpx;}
	.swiper {
		width: 100%;
		height: 600rpx;
	}

	.bg_image {
		width: 100%;
		height: 665rpx;

		&.active {
			filter: blur(4px);
		}
	}

	.detail_m1 {
		margin: 44rpx 0 23rpx;
	}

	.detail_m2 {
		margin: 12rpx 0 23rpx;
	}

	.detail_m3 {
		margin: 0 0 14rpx;
	}

	.detail_m4 {margin: 44rpx 0 22rpx;}

	.detail_m5 {margin: 12rpx 0 30rpx;}

	.detail_m6 {
		margin: 0 0 16rpx;
	}

	.detail_m7 {
		margin: 44rpx 0 26rpx;
	}

	.detail_m8 {
		margin: 0 0 37rpx 0;
	}

	.detail_m9 {
		margin: 0 0 37rpx 0;
	}

	.detail_m10 {
		margin: 62rpx 0 37rpx;
	}

	.detail_m11 {
		margin: 0 0 31rpx 0;

		&:last-child {
			margin-bottom: 98rpx;
		}
	}

	.detail_m12 {
		margin: 0 23rpx 0 0;
	}

	.detail_m13 {
		margin: 50rpx 0;
		text-align: center;
	}

	.back {
		left: 6rpx;
		z-index: 99;
		position: fixed;
	}

	.content {
		position: relative;
		margin:0 3%;
		border-radius: 16rpx 16rpx 0 0;
	}

	.wrapper {
		// padding: 0 26rpx; padding-top: 10rpx;

		.map_icon {
			padding: 4rpx;
			width: 46rpx;
			height: 87rpx;
			margin-left: 38rpx;
		}

		.address_info {
			flex: 1;
		}
	}

	.block_wrapper {
		display: flex;
		flex-wrap: wrap;

		view {
			margin: 0 23rpx 23rpx 0;
			border-radius: 12rpx;
			padding: 4rpx 12rpx;
		}
	}

	.price_wrapper {
    font-size: 28rpx; width: 48.5%; border: 1px solid #EE8332; height: 140rpx; background-color: rgba(238,131,50,0.15); display: flex; align-items: center; justify-content: center; padding: 10rpx 20rpx; padding-right: 10rpx; box-sizing: border-box; border-radius: 6rpx;
		.price_icon1 {
			width: 26rpx;
			height: 40rpx;
			margin: 0 16rpx 0 0;
		}

		.price_icon2 {
			width: 35rpx;
			height: 35rpx;
			margin-right: 16rpx;
		}
	}

	.adress_icon {
		width: 29rpx;
		height: 35rpx;
		margin: 6rpx 23rpx 0 0;
	}

	.introduce {
    
	}

	.detail_foot {
		bottom: 0;
		width: 100%;
		position: fixed; z-index: 40;
		padding: 15rpx 0 50rpx;
		background-color: #fff;
		box-shadow: 0px -4rpx 12rpx rgba(0, 0, 0, 0.16);
	}

	.detail_foot_left {
		padding: 6rpx; text-align: center; flex: 1;
		margin: 0 10rpx -10rpx;
		position: relative;

		image {
			width: 35rpx;
			height: 31rpx;
			margin: 0 auto 8rpx;
		}

		button {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: none;
			position: absolute;
		}
	}

	.detail_foot_btn {
		width: 492rpx;
		height: 77rpx;
		border-radius: 35rpx;
		background: linear-gradient(273deg, #EE8332 0%, #FF6A00 100%);
	}

	/deep/ .van-hairline--bottom:after {
		border-color: #ddd;
	}
  
  #maps{
    width: 100%; height: 400rpx; margin: 20rpx 0 -40rpx;
  }
</style>
